<template>
  <div class="export-corner" v-loading="loading">
    <div class="top">
      <div class="left">
        <div class="left-top">烟花切圆图</div>
        <div class="left-center">
          <div class="left-center-img" v-for="item in snapshots">
            <img v-if="item" :src="item" width="100%" height="100%" />
          </div>
        </div>
      </div>
      <div class="right">
        <div class="left-top">切圆示意图</div>
        <div class="right-center">
          <div class="img">
            <img v-if="windmill" :src="windmill" width="100%" height="100%" />
          </div>
        </div>
      </div>
    </div>
    <div class="progress-box" v-show="dcIngFlag">
      <el-progress
        :percentage="dcVal"
        :show-text="true"
        :stroke-width="10"
        :color="[{ color: '#4A90E2', percentage: 100 }]"
      ></el-progress>
    </div>
    <div class="bottom">
      <el-button type="primary" @click="exportImg">
        <img :src="iocnExportImg" width="16px" height="16px" />
        导出图片
      </el-button>
    </div>
  </div>
</template>
<script setup>
import { defineProps, defineEmits,watch } from "vue";
import { ElMessage } from "element-plus";
import iocnExportImg from "../assets/img/exportImg.png";
const loading = ref(false);
const dcIngFlag = ref(false);
const dcVal = ref(0);
const taskId = ref(null);
const props = defineProps({
  snapshots: [],
  windmill: "",
  bfVideoName:'',
  bfVideoId:'',
  dialogVideoVisible:false
});
const emit = defineEmits("closeDialog");
import { circularPatternExport } from "../http/records.js";
const snapshots = ref();
const windmill = ref();
const exportCircular = () => {
  loading.value = true;
  const param = {
    force_align: true,
    revise_y: true,
    soft_update: true,
    filename:props.bfVideoName,
    record_id:props.bfVideoId
  };
  circularPatternExport(param).then((res) => {
    if(res.status == "success"){
      taskId.value = res.data.task_id;
      loading.value = false;
      initProgressWs();
    }
    
  });
};
const exportImg = async () => {
  if (dcIngFlag.value) {
    ElMessage({
      type: "warning",
      message: "正在加载中，稍后再试...",
    });
    return;
  }

  const allUrls = [windmill.value, ...snapshots.value];
  for (const [index, item] of allUrls.entries()) {
    const response = await fetch(item);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const blob = await response.blob();
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = index == 0 ? "切圆示意图.png" : `烟花切圆图${index}.png`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    // 释放 URL 对象
    URL.revokeObjectURL(url);
  }
  emit("closeDialog", true);
};

function initProgressWs() {
  //这个接口其实没用
  let ws = new WebSocket(
    `ws://113.44.105.79:8080/ws/progress/${taskId.value}`
  );
  ws.onopen = function (evt) {
    dcIngFlag.value = true;
    console.log("Connection open.");
  };
  ws.onmessage = function (evt) {
    // loading.value = false;

    let d = JSON.parse(evt.data);
    if (d.type == "connected") {
      dcIngFlag.value = true;
      dcVal.value = 0;
    }
    if (d.type == "progress" || d.type == "completed") {
      dcVal.value = d.progress;
    }
    if (d.type == "completed") {
      let res = d.result;
      windmill.value = import.meta.env.VITE_BASIC_URL + res.windmill;
      snapshots.value = res.snapshots.map((item) => {
        return import.meta.env.VITE_BASIC_URL + item;
      });
      dcIngFlag.value = false;
      ws.close();
    }
  };
  ws.onclose = function (evt) {};
}

exportCircular();
// onMounted(() => {

// });
watch(() =>props.dialogVideoVisible,
(val) =>{
  if(val){
    console.log(val);
    
    exportCircular();
  }
  
})
</script>
<style lang="scss" scoped>
.export-corner {
  width: 100%;
  position: relative;
  .progress-box {
    position: absolute;
    width: 50%;
    top: 50%;
    left: 25%;
  }
  .top {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;

    .left,
    .right {
      background: url("../assets/img/cornerBackground.png") center center
        no-repeat;
      background-size: cover;
      position: relative; // 为内部图片定位提供参考
      overflow: hidden; // 防止内容溢出

      .left-top {
        width: 100%;
        padding: 0.5rem 1.25rem;
        font-weight: 500;
        color: #4958c5;
        display: flex;
        align-items: center;
      }

      .left-center {
        width: 100%;
        height: calc(100% - 2.75rem); // 根据顶部高度调整
        padding: 0.75rem 1.125rem 1.5rem 1.25rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.75rem;

        .left-center-img {
          width: calc(50% - 0.375rem); // 考虑gap的影响
          height: calc(50% - 0.375rem); // 考虑gap的影响
          min-height: 120px; // 设置最小高度
          border-radius: 0.5rem;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          transition: transform 0.3s ease;
          object-fit: cover; // 确保图片比例不变形
          img {
            width: 100%;
            height: 100%;
          }
          &:hover {
            transform: scale(1.02);
          }
        }
      }

      .right-center {
        width: 100%;
        height: calc(100% - 2.75rem); // 根据顶部高度调整
        padding: 0.75rem 1.125rem 1.5rem 1.25rem;
        display: flex;
        justify-content: center;
        align-items: center;

        .img {
          width: 100%;
          height: 100%;
          max-height: 100%; // 防止图片溢出
          object-fit: contain; // 保持图片比例
          border-radius: 0.5rem;
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0;

    .my_btn {
      background: url("../assets/img/cornerBackground.png") center center
        no-repeat;
      background-size: cover;
      border-radius: 0.5rem;
      padding: 0.75rem 2rem;
      font-weight: 500;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      }
    }
    .el-button {
      padding: 3px 5px;
      width: 240px;
      height: 40px;
    }
  }
}

/* 1K (1920x1080) - 基础样式 */
.export-corner {
  .top {
    .left,
    .right {
      width: 31.125rem; // 498px/16
      height: 34.25rem; // 548px/16

      .left-top {
        height: 2.75rem; // 44px/16
        font-size: 1.1875rem; // 19px/16
      }
    }
  }

  .bottom {
    height: 3.75rem; // 60px/16
  }
}

/* 2K (2560x1440) */
@media screen and (min-width: 1921px) and (max-width: 2560px) {
  .export-corner {
    .top {
      .left,
      .right {
        width: 35rem; // 560px
        height: 38.5rem; // 616px
        .left-top {
          height: 3.125rem; // 50px
          font-size: 1.375rem; // 22px
        }

        .left-center,
        .right-center {
          height: calc(100% - 3.125rem); // 根据新的顶部高度调整
        }
      }
    }

    .bottom {
      height: 4.375rem; // 70px
    }
  }
}

/* 2.5K (2560x1600) */
@media screen and (min-width: 2561px) and (max-width: 2880px) {
  .export-corner {
    .top {
      .left,
      .right {
        width: 38.75rem; // 620px
        height: 42.5rem; // 680px

        .left-top {
          height: 3.5rem; // 56px
          font-size: 1.5rem; // 24px
        }

        .left-center,
        .right-center {
          height: calc(100% - 3.5rem);
          padding: 1rem 1.5rem 2rem 1.5rem;
        }
      }
    }
  }
}

/* 4K (3840x2160) */
@media screen and (min-width: 2881px) {
  .export-corner {
    .top {
      .left,
      .right {
        width: 46.875rem; // 750px
        height: 51.25rem; // 820px

        .left-top {
          height: 4.375rem; // 70px
          font-size: 1.75rem; // 28px
          padding: 0.75rem 1.75rem;
        }

        .left-center,
        .right-center {
          height: calc(100% - 4.375rem);
          padding: 1.5rem 2rem 3rem 2rem;
        }

        .left-center-img {
          min-height: 180px; // 4K下增大最小高度
        }
      }
    }
  }
}

/* 小屏幕适配 */
@media screen and (max-width: 1366px) {
  .export-corner {
    .top {
      .left,
      .right {
        .left-center-img {
          min-height: 100px; // 小屏幕下减小最小高度
        }
      }
    }
  }
}
</style>
